<div id="cordova-device-orientation" data-view="cordova/device-orientation">
<style type="text/css">
	#compass{
		margin-top: 30px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
	.start{
		margin-top:20px; 
		width: 100%;
		/*height: 40px;*/
	}
	.stop{
		margin-top:20px; 
		width: 100%;
		/*height: 40px;*/
	}
	.con{
		padding: 20px 20%;
	}
</style>
  <header class="bar bar-nav">
    <a class="icon icon-left-nav pull-left" data-action="back"></a>
    <h1 class="title">Device Orientation</h1>
  </header>
  <div class="content">
  <div class="con">
  	<button class="start btn btn-block btn-primary">Start Watching</button>
  	<button class="stop btn btn-block btn-primary">Stop Watching</button>
  </div>
  	<div id="compass">
  		<p>Click the button to start compassHeading...</p>
  	</div>
  </div>
</div>
 